<template>
	<div class="container" v-if="dialogVisible">
		<el-dialog width="840px" :visible.sync="dialogVisible" custom-class="speak-waiting" :destroy-on-close="true" :before-close="onClose">
			<div slot="title" class="dialog-title"> <AiTemplateTitle :taskId="taskId" :name="form.name" @updateTitleName="updateTitleName" /></div>
			<AiTemplateView :property="form" :nextStepOption="nextStepOption" :taskId="taskId" ref="AiTemplateView" />
			<span slot="footer" class="dialog-footer">
				<el-button @click="onClose" v-if="!showDetail">取消</el-button>
				<el-button type="primary" class="btn-blue" @click="onOk" v-if="!showDetail">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import AIWorkflow from '@/modules/workFlow.js';
import AiTemplateView from '@/views/AiWorkFlow/AiTemplateView/index.vue';
import AiTemplateTitle from '@/views/AiWorkFlow/AiTemplateView/AiTemplateTitle.vue';
export default {
	name: 'SpeakWaiting',
	components: { AiTemplateView, AiTemplateTitle },
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		taskId: {
			type: String,
			default: ''
		},
		modalValue: {
			type: Object,
			default: () => {}
		},
		showDetail: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			workstep: {},
			form: {},
			nextStepOption: []
		};
	},

	computed: {},

	mounted() {
		const { nextStepOption, getTemplateTalkProperty } = AIWorkflow;
		this.nextStepOption = nextStepOption;
		this.form = getTemplateTalkProperty();
		AIWorkflow.setTemplateTalkProperty(this.taskId, this.form, this.modalValue);
		console.log(this.form, nextStepOption);
	},

	methods: {
		onOk() {
			let node = this.$refs.AiTemplateView.save();
			console.log(node);
			const chagedNextSteps = this.$refs.AiTemplateView.getChangedNextStep();
			if (node) {
				this.$emit('on-ok', { data: node, chagedNextSteps: chagedNextSteps });
			}
		},

		onClose() {
			this.$emit('on-cancel');
		},
		updateTitleName(name) {
			this.form.name = name;
		}
	}
};
</script>

<style lang="less" scoped>
.dialog-title {
	text-align: left;
	font-weight: bold;
	font-size: 16px;
}

.inner-wraper {
	width: calc(100% - 120px);
	margin-left: 120px;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	padding: 10px;
}
.btnText-blue {
	color: #476aed;
}
.btnText-gray {
	color: #b3b3b3;
}
.arrows-icon {
	padding: 0 10px;
}
.btn-blue {
	background-color: #6384fe;
	border: 1px solid #6384fe;
	color: #fff;
}
</style>
